<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>苏宁易购注册页面</title>
		<style type="text/css">
			* {
				box-sizing: border-box;
				padding: 0px;
				margin: 0px;
			}
			
			#top {
				width: 1346px;
				height: 90px;
				/*border: 1px solid;*/
			}
			
			#top #top-center {
				width: 990px;
				height: 90px;
				/*border: 1px solid;*/
				margin: 0px auto;
			}
			
			#top-center #top-center-img {
				width: 189px;
				height: 59px;
				margin-top: 16px;
			}
			
			#top #top-center .top-span {
				display: inline-block;
				/*border: 1px solid;*/
				width: 89px;
				height: 18px;
				position: absolute;
				top: 30px;
				left: 380px;
			}
			
			#top-center .label1 a {
				display: inline-block;
				width: 36px;
				height: 18px;
				/*border: 1px solid;*/
				text-decoration: none;
				float: right;
				font-size: 12px;
				position: absolute;
				margin-right: 10px;
			}
			
			#top-center .label1 a:hover {
				text-decoration: underline;
			}
			
			#top-center .label1 {
				display: inline-block;
				width: 135px;
				height: 18px;
				/*border: 1px solid;*/
				font-size: 12px;
				margin-top: 60px;
				margin-right: 10px;
				float: right;
			}
			/*中间*/
			
			#center {
				width: 1346px;
				height: 646px;
				/*border: 1px solid;*/
				margin-bottom: 50px;
			}
			
			#center #center-center {
				width: 990px;
				height: 646px;
				/*border: 1px solid;*/
				margin: 0px auto;
			}
			
			#center-center .center-top .title {
				width: 870px;
				height: 86px;
				/*border: 1px solid;*/
				margin: 0px auto;
				border: 2px solid #999999;
				border-left: 2px solid white;
				border-top: 2px solid white;
				border-right: 2px solid white;
			}
			
			.center-ul {
				margin-top: 54px;
				margin-left: 220px;
				font-size: 20px;
			}
			
			.center-ul li {
				list-style-type: none;
				float: left;
				margin-right: 25px;
			}
			
			.center-ul li span {
				width: 16px;
				height: 16px;
				/*border: 1px solid;*/
				display: inline-block;
				background-image: url(img/suning_zhuce/cop-bg.png);
				margin-left: 5px;
			}
			
			.center-ul .li1 {
				border-bottom: 2px solid #FF9C00;
				color: #FF9C00;
			}
			
			.center-ul li .li-span1 {
				background-position: 536px 181px;
			}
			
			.center-ul li .li-span2 {
				background-position: 560px 157px;
			}
			
			.center-ul li .li-span3 {
				background-position: 560px 133px;
			}
			
			.list {
				width: 440px;
				height: 560px;
				/*border: 1px solid;*/
				margin: 0px auto;
				padding-top: 50px;
			}
			
			.list .tishi {
				width: 440px;
				height: 34px;
				border: 1px solid #FF9C00;
				text-align: left;
				/*line-height: 34px;*/
			}
			
			.list .tishi .liwu {
				width: 19px;
				height: 18px;
				display: inline-block;
				/*border: 1px solid;*/
				margin-top: 5px;
				background-image: url(img/suning_zhuce/giftIcon.png);
				background-repeat: no-repeat;
				margin-left: 10px;
				margin-top: 8px;
			}
			
			#tz {
				width: 114px;
				height: 17px;
				display: inline-block;
				/*border: 1px solid;*/
				font-size: 12px;
				color: #FF9C00;
				position: absolute;
				top: 238px;
			}
			.biaodan{
				width: 440px;
				height: 343px;
				/*border: 1px solid;*/
				margin-top: 15px;
			}
			.biaodan .text{
				width: 440px;
				height: 40px;
				border: 1px solid #C3C3C3;
			}
			.biaodan .text .text-head{
				display: inline-block;
				width: 34px;
				height: 40px;
				/*border: 1px solid;*/
				background-image: url(img/suning_zhuce/input-icon.png);
				background-position: 0px -155px;
			}
			.biaodan .text .text-name{
				width: 360px;
				height: 38px;
				float: right;
				margin-right: 40px;
				border: 0px;
				font-size: 14px;
			}
			.biaodan .text .cuo{
				display: none;
				width: 16px;
				height: 16px;
				/*border: 1px solid;*/
				position: absolute;
				left: 865px;
				top: 290px;
				background-image: url(img/suning_zhuce/cop-bg.png);
				background-position: 0px 0px;
			}
			.biaodan .text .dui{
				width: 16px;
				height: 16px;
				/*border: 1px solid;*/
				position: absolute;
				left: 865px;
				top: 290px;
				background-image: url(img/suning_zhuce/cop-bg.png);
				background-position: -19px 0px;
				display: none;
			}
			.biaodan .red{
				display: none;
				width: 440px;
				height: 30px;
				/*border: 1px solid;*/
				color: red;
				line-height: 30px;
				font-size: 14px;
				position: absolute;
				top: 315px;
				left: 455px;
			}
			.text-yzm{
				width: 239px;
				height: 40px;
				border: 1px solid #C3C3C3;
				margin-top: 35px;
			}
			.text-yzm .text-head2{
				display: inline-block;
				width: 34px;
				height: 40px;
				/*border: 1px solid #999999;*/
				background-image: url(img/suning_zhuce/input-icon.png);
				background-position: 0px -5px;
			}
			.text-yzm .yzm{
				display: inline-block;
				width: 158px;
				height: 38px;
				float: right;
				margin-right: 40px;
				border: 0px;
			}
			.text-yzm #dui{
				display: none;
				width: 16px;
				height: 16px;
				/*border: 1px solid;*/
				position: absolute;
				left: 675px;
				top: 365px;
				background-image: url(img/suning_zhuce/cop-bg.png);
				background-position: -19px 0px;
			}
			.text-yzm #cuo{
				display: none;
				width: 16px;
				height: 16px;
				/*border: 1px solid;*/
				position: absolute;
				left: 675px;
				top: 365px;
				background-image: url(img/suning_zhuce/cop-bg.png);
				background-position: 0px 0px;
			}
			.yzmt{
				width: 200px;
				height: 40px;
				border: 1px solid #C3C3C3;
				text-align: center;
				line-height: 40px;
				position: absolute;
				top: 350px;
				left: 690px;
			}
			.aa{
				display: inline-block;
				width: 40px;
				/*height: 14px;*/
				/*border: 1px solid;*/
				font-size: 12px;
				position: absolute;
				top: 375px;
				left: 850px;

			}
			.aa a{
				text-decoration: none;
				
			}
			.aa a:hover{
				color: #FF9C00;
				text-decoration: underline;
			}
			.red1{
				width: 440px;
				height: 30px;
				text-align: left;
				line-height: 30px;
				color: red;
				/*border: 1px solid;*/
				position: absolute;
				top:395px ;
				left: 455px;
				font-size: 12px;
				display: none;
			}
			.tongyi{
				width: 440px;
				/*height: 16px;*/
				/*border: 1px solid;*/
				margin-top: 20px;
				font-size: 12px;
			}
			.tongyi a{
				text-decoration: none;
			}
			.tongyi a:hover{
				color: red;
				text-decoration: underline;
			}
			.finish{
				width: 440px;
				height: 40px;
				/*border: 1px solid;*/
				margin-top: 5px;
				text-align: center;
				line-height: 40px;
				color: white;
				font-weight: bold;
				background-color: #FF9C00;
				border-radius: 5px;
				margin-bottom: 5px;
			}
			.finish:hover{
				background-color: #FF6600;
			}
			.finish a{
				color: white;
				text-decoration: none;
				font-size: 20px;
			}
			.qiye{
				text-decoration: none;
				color: black;
				font-size: 12px;
			}
			.qiye:hover{
				color: #FF9C00;
				text-decoration: underline;
			}
			/*尾部*/
			#footer {
				width: 1349px;
				height: 145px;
				/*border: 1px solid;*/
				margin-top: 10px;
			}
			
			#footer p {
				width: 990px;
				height: 25px;
				/*border: 1px solid;*/
				margin: 0px auto;
				text-align: center;
				font-size: 12px;
				margin-bottom: 5px;
			}
			
			#footer .footer-p1 {
				margin-top: 5px;
			}
			
			#footer a {
				display: inline-block;
				border-right: 1px solid #C3C3C3;
				text-decoration: none;
				color: black;
				font-size: 12px;
				padding-right: 5px;
			}
			
			#footer a:hover {
				text-decoration: underline;
				color: red;
			}
			
			#footer .last {
				border: 0px;
			}
			
			#footer .footer-p3 {
				color: #999999;
			}
			
			#footer .footer-p3 a {
				border: 0px;
				color: #999999;
				padding-right: 0px;
			}
			
			#footer .footer-div {
				width: 990px;
				height: 25px;
				/*border: 1px solid red;*/
				margin: 0px auto;
				text-align: center;
			}
			
			#footer .footer-div a {
				border: 0px;
			}
			.tong{
				font-size: 12px;
				color: red;
				display: none;
			}
		</style>
        <script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var count=0;
        	$(function(){
        		//验证手机号
        		var reg=new RegExp;
        		var phone= /^1[34578][0-9]{9}$/;
        		
        		$(".text-name").blur(function(){
        			
        			if(phone.test($(".text-name").val())){
        				$(".dui").css("display","block");
        				$(".cuo").css("display","none");
        				$(".text").css("border","1px solid #C3C3C3");
        				$(".red").css("display","none");
        			}
        			else{
        				$(".text").css("border","1px solid #FF0000");
        				$(".dui").css("display","none");
        				$(".cuo").css("display","block");
        				$(".red").css("display","block");
        			}
        		});
        		//同意
        		$(".dianji").click(function() {
					count++;
					if(count%2==0){
						$(".tong").css("display","block");
					}
					else{
						$(".tong").css("display","none");
					}
				});
        	});
        </script>
	</head>

	<body>
		<div id="top">
			<div id="top-center">
				<img src="img/suning_denglu/h-img.png" id="top-center-img" />
				<span class="top-span"><img src="img/suning_zhuce/regLogo.png"/></span>
				<label class="label1">我已经注册了，马上<a href="suning-_denglu.html">登录></a></label>
			</div>
		</div>
		<div id="center">
			<div id="center-center">
				<div class="center-top">
					<div class="title">
						<ul class="center-ul">
							<li class="li1">
								<span class="li-span1"></span> 设置登录名
							</li>
							<li>
								<span class="li-span2"></span> 设置账户信息
							</li>
							<li>
								<span class="li-span3"></span> 注册成功
							</li>
						</ul>
					</div>
					<div class="list">
						<div class="tishi">
							<i class="liwu"></i>
							<span id="tz">
								注册完成有惊喜哦~
							</span>
						</div>
						<!--验证开始-->
						<div class="biaodan">
							<div class="text">
								<span class="text-head"></span>
								<input type="text" class="text-name" placeholder="手机号" />
								<i class="cuo"></i>
								<i class="dui"></i>
							</div>
							<div class="red">格式不正确，请输入正确的手机号</div>
							<div class="text-yzm">
								<span class="text-head2"></span>
								<input type="text" class="yzm" placeholder="验证码" />
								<i id="cuo"></i>
								<i id="dui"></i>
							</div>
							<div class="yzmt">
								<img src="img/suning_zhuce/imageCode.jpg"/>
							</div>
							<div class="aa">
								<a href="#">换一张</a>
							</div>
							<!--隐藏-->
							<div class="red1">验证码不正确！</div>
							<div class="tongyi">
								<input class="dianji" type="checkbox" checked="checked" />同意
								<a href="#">《苏宁易购会员章程》</a><a href="#">《易富宝协议》</a>
								及<a href="#">《苏宁联盟广告在线协议》</a>
							</div>
							<div class="tong">
								您必须同意苏宁服务条款后，才能提交注册
							</div>
							<div class="finish">
							<a class="xianshi" href="suning_zhuce_yanzheng.html">
								同意协议并注册
							</a>
							<!--隐藏部分-->
							<!--<a class="yichang">提交成功</a>-->
							</div>
							<a href="#" class="qiye">
								企业用户注册
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="footer">
			<p class="footer-p1">
				<a href="#">苏宁元商</a>
				<a href="#">苏宁互联</a>
				<a href="#">苏宁金融</a>
				<a href="#">易付宝</a>
				<a href="#">PPTV</a>
				<a href="#">红孩子</a>
				<a href="#">缤购</a>
				<a href="#">乐购仕</a>
				<a href="#">苏宁物流</a>
				<a href="#">苏宁美国</a>
				<a href="#">苏宁香港</a>
				<a href="#" class="last">手机苏宁</a>
			</p>
			<p class="footer-p2">
				<a href="#">关于苏宁易购</a>
				<a href="#">联系我们</a>
				<a href="#">诚聘英才</a>
				<a href="#">供应商入驻</a>
				<a href="#">苏宁联盟</a>
				<a href="#">苏宁招标</a>
				<a href="#">友情链接</a>
				<a href="#">法律声明</a>
				<a href="#">用户体验提升计划</a>
				<a href="#" class="last">股东会员认证</a>
			</p>
			<p class="footer-p3">
				Copyright© 2002-2016 ，苏宁云商集团股份有限公司版权所有
				<a href="#">苏ICP备10207551号-4</a>
				<a href="#">苏B1-20130131</a>
				<a href="#">苏B2-20130376</a>
				<a href="#">苏B2-20130391</a>
				出版物经营许可证新出发苏批字第A-243号
			</p>
			<div class="footer-div">
				<a href="#"><img src="img/suning_denglu/chengxin.png" /></a>
				<a href="#"><img src="img/suning_denglu/unicom.png" /></a>
				<a href="#"><img src="img/suning_denglu/dianxin.jpg" /></a>
				<a href="#"><img src="img/suning_denglu/dianzi.png" /></a>
			</div>
		</div>
	</body>

</html>